<template>
  <el-row>
    <el-col>
      <!--  筛选条件    -->
      <el-form :inline="true" size="small">
        <el-form-item label="服务名称">
          <el-input style="width: 215px" placeholder="服务名称"></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col>
      <!--   列表   -->
      <vxe-table
          border
          resizable
          height="500"
          :row-config="{isCurrent: true, isHover: true}"
          :data="applyListData">
        <vxe-column field="serviceId" title="服务编号"></vxe-column>
        <vxe-column field="serviceName" title="服务名称"></vxe-column>
        <vxe-column field="durationName" title="申请时长"></vxe-column>
<!--        <vxe-column field="duration" title="申请时长" :formatter="formatterDuration"></vxe-column>-->
        <vxe-column field="additInfo" title="附加信息"></vxe-column>
        <vxe-column field="additFile" title="附加文件">
          <template v-slot="{ row }">
            <el-button type="text" v-if="'0' !== row['additFile']" @click="downloadAdditFile(row['additFile'])"
                       size="small">
              {{ row['additFileName'] }}
            </el-button>
          </template>
        </vxe-column>
<!--        <vxe-column field="applyStatus" title="审核状态" :formatter="formatterStatus"></vxe-column>-->
        <vxe-column field="applyStatusName" title="审核状态"></vxe-column>
        <vxe-column field="createdTime" title="申请时间"></vxe-column>
        <vxe-column title="操作" width="100" show-overflow>
          <template v-slot="{ row }">
            <el-button type="text" @click="approveDetail(row['applicationRecordId'])">详情</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>

      <!--   分页   -->
      <vxe-pager
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          :total="page.total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Total']">
      </vxe-pager>
    </el-col>
    <!--  申请单详情  -->
    <apply-detail :is-show.sync="showApproveDetailForm"
                  :approve-detail="approveDetailData"
                  :durationDict="durationDict"
                  @page-change="queryApplicationRecordList"
                  :applyStatusDict="applyStatusDict">
    </apply-detail>
  </el-row>
</template>

<script>

/**
 * {我的申请列表}
 *
 * @author: 宋康
 * @date: 2023/1/13
 */
import {resourceApplyPublic, queryMyApplicationRecordIPage} from '@/api/map-apply'
import ApplyDetail from '@/views/oneself-centre/personal-work/apply/ApplyDetail'

export default {
  name: "ApplyList",
  mixins: [resourceApplyPublic],
  components: {ApplyDetail},
  data() {
    return {
      applyListData: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    /**
     * {获取用户申请列表}
     *
     * @author: 宋康
     * @date: 2023/1/11
     */
    queryApplicationRecordList() {
      let data = {
        resourceName: "",
        startDate: "",
        endDate: "",
      }
      this._debounce(() => queryMyApplicationRecordIPage(this.page.currentPage, this.page.pageSize, data).then(res => {
        if (res.status) {
          const data = res.data;
          this.page.total = data.total
          this.applyListData = data.records
        }
      }), 500)
    }
  },
  mounted() {
    this.queryDict().then(() => {
      this.queryApplicationRecordList();
    })
  }
}
</script>

<style lang="scss" scoped>

</style>